'use client'
import React, { useState } from "react";
import styles from './page.module.css';
import Image from "next/image";
import SubmitButton from "@/components/button/SubmitButton";
import toast, { Toaster } from 'react-hot-toast'; 

const Contact = () => {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        content: ''
    });
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setIsSubmitting(true);

        try {
            const response = await fetch('/api/comment', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData),
            });

            if (response.ok) {
                // 成功提示（替换为react-hot-toast的语法）
                toast.success('留言发送成功！我们会尽快回复您');
                // 重置表单
                setFormData({ name: '', email: '', content: '' });
            } else {
                const error = await response.json();
                // 错误提示
                toast.error(error.message || '发送失败，请稍后再试');
            }
        } catch (error) {
            toast.error('网络错误，请稍后再试');
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <div>
            <div className={styles.container}>
                <h1 className={styles.title}>让我们保持联系</h1>

                <div className={styles.content}>
                    <div className={styles.imgContainer}>
                        <Image
                            src="/contact.png"
                            alt="联系我们"
                            fill={true}
                            className={styles.image}
                        />
                    </div>
                </div>

                <form className={styles.form} onSubmit={handleSubmit}>
                    <input
                        type="text"
                        name="name"
                        placeholder="姓名"
                        className={styles.input}
                        value={formData.name}
                        onChange={handleChange}
                        required
                    />
                    <input
                        type="email"
                        name="email"
                        placeholder="邮箱"
                        className={styles.input}
                        value={formData.email}
                        onChange={handleChange}
                        required
                    />
                    <textarea
                        className={styles.textArea}
                        name="content"
                        placeholder="留言"
                        cols="30"
                        rows="10"
                        value={formData.content}
                        onChange={handleChange}
                        required
                    ></textarea>

                    <SubmitButton
                        text="发送"
                        loadingText="发送中..."
                        disabled={isSubmitting}
                        type="primary"
                    />
                </form>
            </div>

            {/* 替换为react-hot-toast的Toaster组件（必须添加） */}
            <Toaster
                position="top-right"
                toastOptions={{
                    style: {
                        // 可选：自定义提示框样式
                        backgroundColor: '#fff',
                        color: '#333',
                        border: '1px solid #eee',
                        borderRadius: '4px'
                    }
                }}
            />
        </div>
    )
}

export default Contact;